<template>
	<view>
		 <u-navbar
			@rightClick="rightClick"
			:autoBack="true"
			style='background-color: transparent;'
			bgColor='none'
			titleStyle='color:#fff'
			leftIconColor='#fff'
		>
		</u-navbar>
		<div class='my'>
			<div class='top-bg'>
				<img :src="userdata.avatar"></img>
			</div>
			<div class='user-box'>
				<div class='avatar'>
					<div class='kuang'>
						<u-avatar :src="userdata.avatar" size='90' mode='aspectFill'></u-avatar>
					</div>
				</div>
				<div class='user-list'>
					<div class='box-top'>
						<span>{{userdata.nickname}}</span>
					</div>
					<div class='box-bottom'>
						<div @click='noticer'>
							<span>3</span>
							<span>关注</span>
						</div>
						<div @click='fans'>
							<span>6</span>
							<span>粉丝</span>
						</div>
						<div>
							<span>{{userdata.praise}}</span>
							<span>点赞</span>
						</div>
						<div class='edit'>
							<u-button color='#bbb' :plain="true" text="编辑资料" size='mini'></u-button>
						</div>
					</div>
				</div>
			</div>
			<div class='signature'>
				别再幻想，别再懦弱，别再耳热.
			</div>
			<div class='navTab'>
				<div :class="tabs === 1 ? 'active' : '' " @click="tabs = 1">我的{{oneNum}}</div>
				<div :class="tabs === 2 ? 'active' : '' " @click="tabs = 2">帖子{{twoNum}}</div>
				<div :class="tabs === 3 ? 'active' : '' " @click="tabs = 3">评价{{threeNum}}</div>
			</div>
			<div class='box'>
				<div class='flex' v-if="tabs === 1">
					<div class='demo' v-for="item in remark" :key="item.id">
						<img :src="item.img" alt="">
						<p>{{item.goods}}</p>
						<span>已有1人收藏</span>
					</div>
				</div>
				<div class='flex' v-if="tabs === 2">
					<div class='demo' v-for="item in Invitation" :key="item.id">
						<img :src="item.img" alt="">
						<p>{{item.text}}</p>
						<span>{{item.praise}}点赞</span>
					</div>
				</div>
				<div v-if="tabs === 3">
					<div class='btns'>
						<view class="width">
							<u-button 
								:color="active === 1 ? '#28D2D1' : '#999999'" 
								:plain="active === 1 ? false : true" 
								:text="'全部'+allremark" shape="circle" 
								@click='btn1'>								
							</u-button>
						</view>
						<view class="width">
							<u-button 
								:color="active === 2 ? '#28D2D1' : '#999999'" 
								:plain="active === 2 ? false : true" 
								:text="'好评'+goodremarkNum" shape="circle" 
								@click='btn2'>								
							</u-button>
						</view>
						<view class="width">
							<u-button
								:color="active === 3 ? '#28D2D1' : '#999999'" 
								:plain="active === 3 ? false : true" 
								:text="'有图'+haveimgremarkNum" shape="circle" 
								@click='btn3'>								
							</u-button>
						</view>
					</div>
					<div class='mb10' v-for="item in remark" :key="item.id">
						<div class='remarkdemo'>
							<div class='remark-left'>
								<u-avatar :src="item.buyeravatar" shape='square' size='30'></u-avatar>
							</div>
							<div class='remark-right'>
								<p class='buyer'>来自{{item.buyer}}的买家</p>
								<p class='remark'>{{item.remark}}</p>
								<p class='buytime'>{{item.buytime}}</p>
							</div>
						</div>
						<u-line :hairline='false'></u-line>
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userdata:[],
				tabs:1,
				Invitation:[],//帖子列表
				remark:[],//评论列表
				oneNum:null,
				twoNum:null,
				threeNum:null,
				active:1,
				allremark:null,
				goodremark:[],
				goodremarkNum:null,
				haveimgremark:[],
				haveimgremarkNum:0,
				options:{}
			};
		},
		onLoad(option) {
			// 进入他人主页，应该在/pages/Center/homepage路由上携带ID，进入后在onload判断是否携带参数，若有参数拿到参数请求接口请求查找用户
			this.options =  Object.keys(option);		
			if(this.options.length == 0){
				this.userdata = uni.getStorageSync("userInfo");
			}else{
				this.$api.DLQgetOther({id:option.id}).then((res)=>{
					console.log(res)
					this.userdata = res.data
				})
			}
		},
		mounted() {
			//  获取帖子
			this.$api.DLQgetInvitation().then((res)=>{
				// console.log(res)
				this.Invitation = res.data
				this.twoNum = this.Invitation.length
			})
			// 获取评论
			this.$api.DLQgetMygoods().then((res)=>{
				// console.log(res)
				this.remark = res.data
				this.goodremark = res.data.filter((item)=>item.rate >= 3 )
				this.goodremarkNum = this.goodremark.length
				this.haveimgremark = res.data.filter((item)=>item.haveimg == 1 )
				this.haveimgremarkNum = this.haveimgremark.length
				this.allremark = res.data.length
				this.oneNum = this.remark.length
				this.threeNum = this.remark.length
			})
		},
		methods: {
			btn1(){
				this.active = 1
				this.$api.DLQgetMygoods().then((res)=>{
					this.remark = res.data
					this.oneNum = this.remark.length
					this.threeNum = this.remark.length
				})
			},
			btn2(){
				this.active = 2
				this.$api.DLQgetMygoods().then((res)=>{
					this.remark = res.data
					this.oneNum = this.remark.length
					this.threeNum = this.remark.length
					this.remark = this.remark.filter((item)=>item.rate >= 3 )
				})
			},
			btn3(){
				this.active = 3
				this.$api.DLQgetMygoods().then((res)=>{
					this.remark = res.data
					this.oneNum = this.remark.length
					this.threeNum = this.remark.length
					this.remark = this.remark.filter((item)=>item.haveimg == 1 )
				})
			},
			rightClick() {
				// console.log('rightClick');
			},
			noticer(){
				uni.navigateTo({
					url:'/pages/Center/noticer'
				})
			},
			fans(){
				uni.navigateTo({
					url:'/pages/Center/fans'
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.my{
		width: 100%;
		position: relative;
		.top-bg{
			>img{
				filter: blur(8px);	
				height: 400upx;
				width: 100%;
			}
		}
		.user-box{ 
			display: flex;
			height: 280upx;
			box-sizing: border-box;
			// background-color: aqua;
			position: absolute;
			width: 100%;
			top: 280upx;
			padding: 20upx;
			// .user-content{
			// 	margin: 0 40upx;
			// 	background-color: #fff;
			// 	// height: 100%;
			// 	border-radius: 20upx;
			// 	box-shadow: 0px 0px 12upx 4upx #eee;
			// 	box-sizing: border-box;
			// 	padding: 50upx 100upx;
			// }
			.avatar{
				display: flex;
				align-items: center;
				.kuang{
					background-color: #fff;
					padding: 8upx;
					border-radius: 50%;
				}
			}
			.user-list{
				display: flex;
				flex-direction: column;
				margin-left: 40upx;
				.box-top{
					height: 50%;
					background-color: transparent;
					display: flex;
					align-items: center;
				}
				.box-bottom{
					height: 50%;
					background-color: transparent;
					display: flex;
					>div{
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						margin-right: 50upx;
						span+span{
							color: #8F8F8F;
							font-size: 30upx;
						}
					}
					.edit{
						margin: 0;
					}
				}
			}
			
		}
		
		.signature{
			margin: 150upx 40upx 0 ;
			padding: 30upx;
			font-size: 26upx;
			background-color: #F4F4F4;
			border-radius: 16upx;
			color: #606266;
		}
		.navTab{
			margin: 50upx 0;
			padding: 0 40upx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			box-shadow: 0 0 2px 2px #F9F9F9;
			height: 74upx;
			color: #8F8F8F;
			div{
				width: 30%;
				display: flex;
				align-items: center;
				justify-content: center;
				height: inherit;
				font-size: 30upx;
			}
			.active{
				color: #28D2D1;
				border-bottom: #28D2D1 6upx solid;
				font-weight: 600;
			}
		}
		.box{
			margin: 0 40upx;
			.flex{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				.demo{
					width: 47%;
					box-shadow: 0 0 2px 2px #F5F5F5;
					margin:0 0 40upx;
					border-radius: 20upx;
					display: flex;
					flex-direction: column;
					position: relative;
					img{
						width: 100%;
						border-radius: 20upx 20upx 0 0;
						height: 246upx;
					}
					p{
						font-size: 30upx;
						margin: 30upx;
						color: #8F8F8F;
						word-wrap:break-word;				 
						text-overflow:ellipsis;
					}
					span{
						// position: absolute;
						// right: 5%;
						// bottom: 0;
						font-size: 24upx;
						transform: scale(0.8);
						color: #8F8F8F;
						text-align: right;
						margin-bottom: 20upx;
					}
				}			
			}
			// 评论
			.mb10{
				margin: 20upx 0;
			}
			.remarkdemo{
				display: flex;
				margin-bottom: 20upx;
				.remark-right{
					margin-left: 20upx;
					.buyer{
						// line-height: 60upx;
						margin: 10upx 0;
						font-size: 28upx;
						color: #8F8F8F;						
					}
					.remark{
						font-size: 30upx;
						margin: 10upx 0 20upx;
					}
					.buytime{
						font-size: 28upx;
						color: #8F8F8F;	
					}
				}
			}
		}
	}
	.btns{
		display: flex;
		.width{
			width: 160upx;
			margin: 0 20upx;
		}
	}

::v-deep .u-navbar__content{
	background-color: transparent;
}
	
::v-deep .uicon-setting-fill{
	color: #fff !important;
}
</style>